<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <mescroll-uni
                v-if="loadOk"
                ref="mescrollRef"
                @init="mescrollInit"
                :height="listHeight"
                :down="downOption"
                @down="downRefresh"
                :up="upOption"
                @up="getData">
                <view class="pro-list-item" v-for="(item, index) in datas" :index="index" :key="index">
                    <easy-pro-image customSize="160" :url="easyGetImgUrl(item.ProductImage)"></easy-pro-image>
                    <view class="pro-main">
                        <view class="pro-name">
                            <text class="pro-name-text"
                                ><text v-if="item.GiftId != 0" class="gift">【赠品】</text>{{ item.Name }}</text
                            >
                        </view>
                        <view class="pro-spec">
                            <text class="pro-spec-text">{{ item.ProductDescription }}</text>
                        </view>
                        <view class="pro-num">
                            <text class="pro-num-text">货号：{{ item.ProductCode }}</text>
                        </view>
                        <view class="pro-num" v-if="item.Attribute">
                            <text class="pro-num-text">规格：{{ item.Attribute }}</text>
                        </view>
                        <view class="pro-price">
                            <view class="pro-price-left">
                                <text>￥{{ item.Price }}</text>
                                <text>x {{ item.Amount }}</text>
                                <text>{{ item.UnitName }}</text>
                            </view>
                            <view class="pro-price-right">
                                <text>小计：</text>
                                <text class="total-price">￥{{ (item.Price * item.Amount).toFixed(2) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>

        <view class="bottom-bar">
            <text>合计：</text>
            <text class="price">￥</text>
            <text class="price">{{ totalPrice.toFixed(2) }}</text>
        </view>
    </view>
</template>

<script>
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import easyProImage from "@/components/easy/easy-pro-image.vue"
export default {
    components: {
        easyProImage,
    },
    data() {
        return {
            downOption: {
                use: false,
            },
            config: {
                title: "商品清单",
                centerSlot: true,
            },
            listHeight: "",
            loadOk: false,
            totalPrice: 0,
        }
    },
    onLoad(e) {
        this.datas = JSON.parse(decodeURIComponent(e.datas))
        this.totalPrice = Number(e.totalPrice)
    },
    mounted() {
        this.getListHeight()
    },
    onShow() {},
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e - 68 + "px"
                this.loadOk = true
            })
        },
        //获取列表数据
        getData(page) {
            this.mescroll.endBySize(1, 1)
            this.allLength = this.datas.length
            this.isLoaded = true
        },
        //刷新
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}
.main {
    padding: $app-page-padding;
}
.pro-list-item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: $app-page-padding;
    border-radius: 16rpx;
    .pro-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        text {
            color: $app-color-text-tip;
        }
        .pro-name {
            .pro-name-text {
                font-size: $font-size-30;
                font-weight: 700;
                color: $app-color-text-main;
            }
            .gift {
                color: $app-color-main;
            }
        }
        .pro-price {
            display: flex;
            flex-direction: row;
            align-items: center;
            .pro-price-left {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex: 1;
                text {
                    margin-right: 8rpx;
                }
            }
            .pro-price-right {
                display: flex;
                flex-direction: row;
                align-items: center;
                text {
                    font-size: 28rpx;
                }
            }
        }
        .total-price {
            color: $app-color-text-main;
        }
    }
}
.bottom-bar {
    text {
        font-size: 28rpx;
        font-weight: bold;
    }
    .price {
        color: $app-color-main;
    }
}
</style>
